<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="list" v-if="dataList.length > 0">
					<view class="item" v-for="(item, index) in dataList" @click="goPage('/my/task/info',{id: item.id})">
						<view class="title">
							<!-- 	<view class="checkbox">
								<wd-checkbox checked-color="#C91C1F" false-value="false" true-value="true"
									v-model="item.status" shape="square"></wd-checkbox>
							</view> -->
							<view class="text text-ellipsis">
								{{ item.title }}
							</view>
						</view>
						<view class="desc text-ellipsis2">
							{{ getInfoStr(item.info) }}
						</view>
					</view>
				</view>
				<wd-status-tip v-else image="content" tips="无数据" />
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import useRouter from '@/hooks/useRouter.ts';
	import { onShow } from "@dcloudio/uni-app"
	import useDataLoad from '@/hooks/useDataLoad.ts';
	import { getIndexTaskList } from "@/api/temp.ts"
	export default defineComponent({
		name: 'Order',
		setup(props, ctx) {
			const router = useRouter();
			const dataLoad = useDataLoad(getIndexTaskList);
			// 日间light、夜间dark主题
			const theme = ref('light');
			const firstLoad = ref(true); // 是否是第一次加载页面数据，用于初始化数据后自动刷新页面数据
			dataLoad.getData()
			const goPage = (url : any, params : any) => {
				if (!url) {
					uni.$wdToast.error("暂未开放")
					return;
				}
				router.push({
					url,
					params
				})
			}
			const getInfoStr = (info : string) => {
				/* 去除富文本中的html标签 */
				/* *、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。*/
				let content = info.replace(/<.+?>/g, '');

				/* 去除&nbsp; */
				content = content.replace(/&nbsp;/ig, '');

				/* 去除空格 */
				content = content.replace(/\s/ig, '');
				return content
			};
			onShow(() => {
				if (firstLoad.value) {
					dataLoad.getData()
				} else {
					dataLoad.reGetData();
				}
			})
			return {
				theme,
				goPage,
				getInfoStr,
				...dataLoad
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {

		.list {
			padding: 0 24rpx;
			padding-bottom: 27rpx;
			padding-top: 27rpx; // 增加上边距，使列表项之间有间距

			.item {
				padding: 23rpx 23rpx;
				background: #ffffff;
				margin-bottom: 24rpx;

				.title {
					font-family: PingFang;
					font-weight: 500;

					color: #000000;
					display: flex; // 设置flex布局，使checkbox和文字在同一行显示
					align-items: center; // 使checkbox和文字垂直居中

					.checkbox {
						// 设置checkbox的样式，使其与文字对齐
						margin-right: 10rpx; // 设置checkbox与文字之间的间距
					}

					.text {
						width: 90%;
						font-size: 28rpx;
						// 设置文字的样式，使其与checkbox对齐
					}
				}

				>.desc {
					// margin-left: 10%;
					width: 90%;
					margin-top: 14rpx;
					font-family: PingFang;
					font-weight: 400;
					font-size: 21rpx;
					line-height: 36rpx;
					color: #999999;
				}
			}

			.item:nth-child(even) {
				background: #f2f2f2;
				border-radius: 7rpx;
			}
		}
	}
</style>